$colors = {
  info: #428bca,
  danger: #d9534f,
  primary: #6f42c1,
  warning: #f0ad4e,
  success: #5cb85c,
  default: #777
}

.note
  position relative
  margin .5rem 0
  padding 15px
  border-radius 3px

  &.default:not(.no-icon)::before
    content: '\e0a9'

  &.info:not(.no-icon)::before
    content: '\e0a7'

  &.danger:not(.no-icon)::before
    content: '\e0aa'

  &.primary:not(.no-icon)::before
    content: '\e0a8'

  &.warning:not(.no-icon)::before
    content: '\e0a5'

  &.success:not(.no-icon)::before
    content: '\e0a4'

  &::before
    font-family 'solitude'

  &.icon
    padding-left 2.25rem

  > .note-icon
    position absolute
    top calc(50% - .4rem)
    left .7rem
    font-size larger

  a
    color inherit !important
    &:hover
      color var(--efu-white) !important

  for $color, $value in $colors
    &.{$color}:not(.no-icon)::before
      color $value
    &.{$color}:not(.disabled)
      border-left-color $value

      &.modern
        color $value

      &:not(.simple)
        background lighten($value, 75%)

      > .note-icon
        color $value

  &.simple
    border-width 1px 1px 1px 5px
    border-style solid
    border-color #eee
    border-image initial

  &.modern
    background-color #f5f5f5
    color #4c4948
    border 1px solid transparent !important

  &.flat
    border initial
    border-image initial
    border-left 5px solid #eee
    background-color #f9f9f9
    color #4c4948

  h2, h3, h4, h5, h6
    margin-top 3px
    margin-bottom 0
    border-bottom initial
    padding-top 0

  blockquote:first-child, img:first-child, ol:first-child, p:first-child, pre:first-child, table:first-child, ul:first-child
    margin-top 0 !important

  blockquote:last-child, img:last-child, ol:last-child, p:last-child, pre:last-child, table:last-child, ul:last-child
    margin-bottom 0 !important
    font-size 14px !important

  &:not(.no-icon)
    padding-left 2.25rem

    &::before
      position absolute
      top calc(50% - 19px)
      left .7rem
      font-size larger